<template>
  <div class="container">
    <div class="wrapper">
      <div class="chart-box">
        <PictographicCube
          :chartData="chart.chartData1.chartData"
          :yAxisName="chart.chartData1.yAxisName"
          :unit="chart.chartData1.unit"
          :colorList="chart.chartData1.colorList"
        />
      </div>
      <div class="chart-box">
        <MultiBarChart3d
          :chartData="chart.chartData2.chartData"
          :yAxisName="chart.chartData2.yAxisName"
          :unit="chart.chartData2.unit"
          :colorList="chart.chartData2.colorList"
        />
      </div>
      <div class="chart-box">
        <PictographicHorizontalBar
          :chartData="chart.chartData3.chartData"
          :yAxisName="chart.chartData3.yAxisName"
          :unit="chart.chartData3.unit"
          :colorList="chart.chartData3.colorList"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import MultiBarChart3d from '@/components/MultiBarChart3d.vue'
import PictographicCube from '@/components/PictographicCube.vue'
import PictographicHorizontalBar from '@/components/PictographicHorizontalBar.vue'

import { chart } from './data'

</script>
